<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
	</head>
	<style>
		ul,
		li {
			list-style: none;
			padding: 0;
		}
		/*活动列表*/
		
		.active-list {
			margin-top: 15px;
			padding: 0 15px;
		}
		
		.active-list h3 {
			font-size: 16px;
			font-weight: normal;
		}
		
		.active-list ul li {
			margin-bottom: 15px;
			border-bottom: 1px solid #EEEEEE;
			overflow: hidden;
		}
		
		.active-list ul li img {
			display: block;
			width: 100%;
			border-radius: 6px;
		}
		
		.active-list ul li h4 {
			line-height: 30px;
		}
		
		.active-list ul li h4 span {
			float: right;
		}
	</style>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron"></ul>
			</div>
		</div>

		<!--活动列表-->
		<script type="text/javascript" src="../../js/data.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						contentnomore:'没有更多数据了',
						callback: pullupRefresh
					}
				}
			});
			////初始化
			var count = 0;

			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					///请求数据
					var newCount = cells.length > 0 ? 2 : 5; //首次加载20条，每次加载5
					for(var i = cells.length, len = i + newCount; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">' + testData[i].title + '</a>';
						table.appendChild(li);
					}
				}, 1500);
			}

			function addData() {
				var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				for(var i = cells.length, len = i + 2; i < len; i++) {
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					li.innerHTML = '<a class="mui-navigate-right">' + testData[i].title + '</a>';
					//下拉刷新，新纪录插到最前面；
					table.insertBefore(li, table.firstChild);
				}
			}
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					addData();
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui.toast("更新了");
				}, 1500);
			}
			/*mui.plusReady(function() {
				///预加载页面
				var activeShow = mui.preload({
					url: 'activeShow.html',
					id: 'activeShow.html'
				})
				//打开页面
				mui('.active-list').on('tap', 'li', function() {
					mui.fire(activeShow, 'actTitle', {
						'title': this.innerHTML
					});
					mui.openWindow({
						url: 'activeShow.html',
						id: 'activeShow.html'
					})
				});
				///
			});*/
		</script>
	</body>

</html>